<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big{
/* 				width: 350px;
				height: 350px;
				padding-top: 150px;
				padding-left: 150px; */
		/* 		width: 500px;
				height: 500px;
				box-sizing: border-box;
				padding-top: 150px;
				padding-left: 150px; */
				
				width: 500px;
				height: 500px;
				background-color: red;
				border: 1px solid red;
		 
			}
			.small{
				width: 200px;
				height: 200px;
			
				/**
				 * 注意点 如果两个盒子嵌套关系,那么设置了里面一个盒子的顶部的外边距
				 * 外面的盒子也会被顶下来
				 * 如果外面的盒子不想被顶下来,那么可以给外面盒子添加一个边框属性
				 * 在企业开发中,一般情况下 如果需要控制嵌套关系盒子之间的距离,应该
				 * 先考虑padding 其次再考虑margin
				 * margin本质上用于控制兄弟关系之间的距离的 padding用于父子关系的
				 * 
				 
				 再嵌套盒子关系中 我们可以利用margin: 0 auto 来让里面的盒子在外面盒子中水平居中
				 margin:0 auto 只对水平有效 垂直无效
				 
				 */
				
				margin-top: 150px;
				margin-left: 150px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		
		
		<!--
		 需求
		 有一个大盒子 元素的宽高是500
		 有一个小盒子 元素的宽高是200
		 将小盒子放到大盒子中 并且让小盒子在大盒子中垂直居中
		 -->
		 
		 
		 <div class="big">
			  <div class="small"></div>
		 </div>
		
	</body>
</html>